import model from './model.js';
import {isImg} from "./x-util.js";
import {iconMap} from "./x-cube.js";

const tmplBase =`<div  data-key="cube-loading-inner" > </div>`;

const tmplImg = '<img src ="{{icon}}"/>';
const tmplIcon  = '<i class="iconfont {{icon}}"></i>';

export default class cubeLoading extends model {
    $inner;
    constructor($root,$parent){
        super($root,$parent);
        this.init(iconMap.loading);
    }

    init(icon){
        this.$root.html(tmplBase);
        this.$inner =this.$root.find('[data-key="cube-loading-inner"]');
        let spin = isImg(icon)?tmplImg:tmplIcon;
        spin = spin.replace("{{icon}}",icon);
        this.$inner.html(spin);
    }

}